import React, { Component } from 'react';
import TheTable from "@/components/TheTable";
import ThePagination from "../../../components/ThePagination";
import TheButton from "@/components/TheButton";
import TheQueryForm from '@/components/TheQueryForm';
import TheTableExtend from '@/components/TheTableExtend'
import VideoPlayer from "@/components/VideoPlayer"
import { getDateTime3 } from '@/utils/getDate'
import { apiGetWebMemberWalletRecordPage} from '@/request/wallet/userBalance.js'
import store from "@/store/store"
import _ from 'lodash';

import { Space, Modal, Input } from "antd";

const { TextArea } = Input;

class screenAD extends React.Component {
    state = {
        columns: [
            {
                title: "会员ID",
                dataIndex: "memberId",
                key: "memberId",
            },
            {
                title: "用户昵称",
                dataIndex: "nickName",
                key: "nickName",
            },
            // {
            //     title: "实名姓名",
            //     dataIndex: "name",
            //     key: "name",
            // },
            {
                title: "会员手机号",
                dataIndex: "memberMobile",
                key: "memberMobile",
                render: (text) => {
                  var reg = /^(\d{3})\d{4}(\d{4})$/;
                  var memberMobile = text.toString().replace(reg, '$1****$2');
                  return memberMobile;
                }
            },
            {
                title: "会员状态",
                dataIndex: "memberStatus",
                key: "memberStatus",
                render: (text, render) => {
                    let txt = ''
                    switch (text) {
                        case "Y":
                            txt = '正常'
                            break;
                        case "N":
                            txt = '冻结'
                            break;
                        default:
                            break;
                    }
                    return txt;
                },
            },
            {
                title: "支出统计",
                dataIndex: "expendPrice",
                key: "expendPrice",
                render: text => text && <React.$price price={text} />,
            },
            {
                title: "收入统计",
                dataIndex: "incomePrice",
                key: "incomePrice",
                render: text => text && <React.$price price={text} />,
            },
            {
                title: "钱包余额",
                dataIndex: "memberWalletPrice",
                key: "memberWalletPrice",
                render: text => text && <React.$price price={text} />,
            },
            {
                title: "可用余额",
                dataIndex: "walletUsablePrice",
                key: "walletUsablePrice",
                render: text => text && <React.$price price={text} />,
            },
            {
                title: "不可用余额",
                dataIndex: "walletFrozenPrice",
                key: "walletFrozenPrice",
                render: text => text && <React.$price price={text} />,
            },
            {
                title: "功能禁用",
                dataIndex: "memberWalletStatusContent",
                key: "memberWalletStatusContent",
                // render:(text, render) => {
                //     let txt = ''
                //     switch (text) {
                //         case "N":
                //             txt = '正常'
                //             break;
                //         case "C":
                //             txt = '充值禁用'
                //             break;
                //         case "T":
                //             txt = '提现禁用'
                //             break;
                //         case "A":
                //             txt = '充值禁用、提现禁用'
                //             break;
                //         default:
                //             break;
                //     }
                //     return txt;
                // }
            },
            {
                title: "操作",
                fixed: "right",
                width: 200,
                render: (text, render) => {
                    return (
                        <div>
                            <TheButton  haspermi={["wallet:userBalance:accountDetail"]} onClick={() => this.goAccountDetail(render.memberId)}>详细</TheButton>
                            <TheButton  haspermi={["wallet:userBalance:detail"]}  onClick={() => this.goDetail(render.memberId)}>明细</TheButton>
                        </div>
                    );
                },
            },
        ],
        dataSource: [],
        pageData: {
            pageNo: 1,
            pageSize: 10,
        },
        total: 0,
        newColumns: [],
        form_show: true,
        searchOption: [
            {
                field: 'memberData',
                label: '会员信息',
                placeholder: '输入会员ID/会员昵称/会员手机号',
                required: false,
                rules: [],
                type: 'Input',
                defaultValue: ''
            },
            {
                field: 'memberWalletStatus',
                label: '是否禁用',
                placeholder: '请选择',
                required: false,
                rules: [],
                type: 'Select',
                options: [{ value: 'N', label: '正常' }, { value: 'A', label: '禁用' }],
                defaultValue: ''
            },
          ],
        queryForm: {},
        stopReason: '',
        isvideoModalVisible: false,
        videoAddress: ""
    };

    componentDidMount() {
        this.onColumnsFilter(this.state.columns)
        let searchParams = store.getState().searchValue
        let { pageNo, pageSize, queryForm, pathName } = searchParams
        if (searchParams && pageNo && pathName == 'appScreenAD') {
            this.setState({
                queryForm,
                pageData: {
                    pageNo: pageNo, pageSize: pageSize
                }
            }, () => {
                this.queryFormRef.onSetDefault({
                    ...queryForm
                })
                this.getData()
            })
        } else {
            this.getData()
        }
    };

    // 获取表格数据
    getData = async (values) => {
        let { pageNo, pageSize } = this.state.pageData
        if (values && !_.isEmpty(values.time)) {
            values.startTime = getDateTime3(values.time[0]) + " 00:00:00"
            values.endTime = getDateTime3(values.time[1]) + " 23:59:59"
            delete values.time
        }
        this.setState({
            queryForm: values === undefined ? this.state.queryForm : { ...values }
        }, async () => {
            let { time, ...form } = { ...this.state.queryForm }
            const params = {
                pageNo,
                pageSize,
                queryForm: { ...form, time }
            }
            store.dispatch({
                type: 'SaveSearchValues',
                data: {
                    pathName: 'appScreenAD',
                    ...params
                }
            })
            let res = await apiGetWebMemberWalletRecordPage({
                pageNo,
                pageSize, ...this.state.queryForm,
            })
            if (res.code === 0 && res.data) {
                this.setState({
                    dataSource: res.data,
                    pageData: {
                        pageNo: res.pageNo,
                        pageSize: res.pageSize
                    },
                    total: res.totalCount,
                })
            }
        })
    };

    goDetail = (id) => {
        this.props.history.push(`/wallet/userBalance/detail/${id}`);
    };
    goAccountDetail= (id) => {
        this.props.history.push(`/wallet/userBalance/accountDetail/${id}`,);
    };

    videoOk = async () => {
        this.setState({
            isvideoModalVisible: false,
            videoAddress: ""
        })
    }
    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {
                pageNo,
                pageSize
            }
        }, () => {
            this.getData()
        })
    };

    onReset() {
        this.setState({
            queryForm: {}
        }, () => {
            this.pageChange(1, 10)
        })
    }

    onColumnsFilter(value) {
        this.setState({
            newColumns: value
        })
    }

    onFormSearch(values) {
        this.setState({
            pageData: { pageNo: 1, pageSize: 10 }
        }, () => {
            this.getData(values)
        })
    }

    render() {
        const {
            columns,
            dataSource,
            pageData: { pageNo, pageSize },
            total,
            searchOption,
            form_show,
            newColumns,
            isvideoModalVisible, videoAddress
        } = this.state;
        return (
            <div className={"p-layout-box commodity-content"}>
                <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={form_show} option={searchOption}
                    onGetValues={(values) => this.onFormSearch(values)}
                    onReset={(values) => this.onReset(values)}
                >
                </TheQueryForm>
                <TheTableExtend
                    columns={columns}
                    onFormTrigger={() => this.setState({ form_show: !this.state.form_show })}
                    onTableRefresh={() => this.getData()}
                    onColumnsFilter={(value) => this.onColumnsFilter(value)}
                >

                </TheTableExtend>
                <TheTable
                    columns={newColumns}
                    dataSource={dataSource}
                />
                <ThePagination
                    pageNo={pageNo}
                    pageSize={pageSize}
                    total={total}
                    pageChange={this.pageChange}
                />
                {isvideoModalVisible ?
                    <Modal visible={isvideoModalVisible} onOk={this.videoOk} onCancel={this.videoOk}>
                        <VideoPlayer src={videoAddress} />
                    </Modal> : null}
            </div>
        );
    }
}

export default screenAD;
